<template>
	<div class="container">
		<div class="input-file">
			<input ref="fileRef" @change="changeVideo" type="file" accept=".mp4, .mkv" style="display: none;" />
      <button @click="openVideo">打开视频</button>
      <p class="title">{{ title }}</p>
		</div>
		<!-- <video ref="videoRef" width="800" controls src=""></video> -->
		<div ref="dplayerRef" id="dplayer"></div>
	</div>
</template>

<script setup>
defineOptions({ name: 'VideoPage' })
import { ref, onMounted } from 'vue'
import DPlayer from 'dplayer'
// 引入VideoTogether插件
import 'https://fastly.jsdelivr.net/gh/VideoTogether/VideoTogether@latest/release/extension.website.user.js'
// import '@/utils/extension.website.user.js'

const fileRef = ref()
const dplayerRef = ref()
const dp = ref(null) // dplayer实例
const title = ref('请打开本地视频')

const openVideo = () => {
  fileRef.value.click()
}

const changeVideo = (file) => {
  if(!dp.value) {
    alert('dplayer 未加载成功')
    return
  }
	// console.log('files', fileRef.value.files)
	const video = file.target.files[0]
	const videoUrl = URL.createObjectURL(video)
  title.value = video.name
  dp.value.switchVideo({
    url: videoUrl
  })
}

// Dplayer 初始化设置
const initDplayer = () => {
	dp.value = new DPlayer({
		container: dplayerRef.value,
		autoplay: false,
		theme: '#FADFA3',
		loop: true,
		lang: 'zh-cn',
		screenshot: true,
		hotkey: true,
		preload: 'auto',
		volume: 0.7,
		mutex: true,
		video: {
			// url: 'dplayer.mp4',
			// pic: 'dplayer.png',
			// thumbnails: 'thumbnails.jpg',
			type: 'auto',
		},
		contextmenu: [
			{
				text: '作者',
				link: 'https://liwker.top',
			},
			{
				text: 'custom2',
				click: (player) => {
					console.log(player)
				},
			},
		],
	})
}

onMounted(() => {
	initDplayer()
})
</script>

<style lang="scss" scoped>
.container {
	width: 100vw;
  min-width: 700px;
	display: flex;
  flex-flow: column nowrap;
  align-items: center;
  .input-file {
    margin-top: 30px;
    margin-bottom: 15px;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    button {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      line-height: 1;
      height: 40px;
      white-space: nowrap;
      cursor: pointer;
      color: #fff;
      text-align: center;
      box-sizing: border-box;
      outline: none;
      transition: .1s;
      font-weight: 500;
      -webkit-user-select: none;
      user-select: none;
      vertical-align: middle;
      -webkit-appearance: none;
      background-color: #00a1d6;
      border: 1px solid #dcdfe6;
      border-color: #00a1d6;
      padding: 8px 15px;
      font-size: 16px;
      border-radius: 4px;
      &:hover {
        color: #fff;
        border-color: #5dc0e1;
        background-color: #5dc0e1;
        outline: none;
      }
    }
    p.title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #606266;
      margin: 0;
      margin-top: 25px;
    }
  }
	#dplayer {
		width: 60%;
		min-width: 668px;
		max-height: 600px;
		// min-height: 376px;
	}
}
</style>
